<div id="slipMoreBar" class="slipmore-bar">
	<div id="slipMoreContent" class="slipmore-content"></div>
</div>
<div id="maskSlipMoreDiv" class="mask-slipmore-div" style="display: none;" onclick="closeSlipMoreDiv()"></div>
<div class="slipmore-btn" onclick="openSlipMoreDiv(getHtml('slipMoreBtnBar'))"><img class="slipmore-btn-icon" src="static/pic/app/more_btn.png" /></div>
<input type="text" id="selectid" class="display-none" />

<script type="text/javascript">
	function openSlipMoreDiv(html) {
		setHtml('slipMoreContent', html);
        setDisplay('maskSlipMoreDiv', '');
        document.body.style.overflow = 'hidden';
        setClass('slipMoreBar', 'slipmore-bar-out');
    }

    function closeSlipMoreDiv() {
    	setHtml('slipMoreContent', '');
        setDisplay('maskSlipMoreDiv', 'none');
        document.body.style.overflow = 'visible';
        setClass('slipMoreBar', 'slipmore-bar-in');
    }

    function selectAll() {
	    var item = document.getElementsByName('isSelect');

	    setValue('selectid', '');
	    for (var i = 0; i < item.length; i++) {
	    	item[i].checked = true;
	    	setValue('selectid', getValue('selectid') + item[i].value + '■');
	    }
	}

	function selectOne() {
	    var item = document.getElementsByName('isSelect');

	    setValue('selectid', '');
	    for (var i = 0; i < item.length; i++) {
	        if (item[i].checked) {
	            setValue('selectid', getValue('selectid') + item[i].value + '■');
	        }
	    }
	}

	function clearSelect() {
		var item = document.getElementsByName('isSelect');

	    setValue('selectid', '');
	    for (var i = 0; i < item.length; i++) {
	        item[i].checked = false;
	    }
	}
</script>

<style type="text/css">
	.slipmore-bar, .slipmore-bar-out, .slipmore-bar-in
    {
        width: 100%;
        height: 40%;
        bottom: -40%;
        background-color: white;
        display: -webkit-flex;
	    -webkit-flex-direction: column;
	    -webkit-align-items: stretch;
        position: fixed;
        z-index: 202;
    }

    .slipmore-bar-out
    {
        -webkit-animation: slipmoreout 0.1s;
        bottom: 0;
    }

    .slipmore-bar-in
    {
        -webkit-animation: slipmorein 0.1s;
        bottom: -40%;
    }

    @keyframes slipmoreout
    {
        from { bottom: -40%; }
        to { bottom: 0; }
    }

    @keyframes slipmorein
    {
        from { bottom: 0; }
        to { bottom: -40%; }
    }

    .mask-slipmore-div
    {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 201;
    }

    .slipmore-content
    {
    	-webkit-flex: auto;
    	overflow-x: hidden;
        overflow-y: scroll;
        font-size: 0;
    }

    .slipmore-btn
	{
	    position: fixed;
	    bottom: 22%;
	    right: 5%;
	    z-index: 98;
	    width: 75px;
	    height: 75px;
	    -webkit-border-radius: 10px;
	}

	.slipmore-btn-icon
	{
	    width: 75px;
	    height: 75px;
	}

    .slipmore-checkbox
    {
    	-webkit-flex: none;
	    width: 30px;
	    height: 30px;
    }

    .slipmore-option-title
	{
	    font-size: 30px;
	    color: #333333;
	    text-align: left;
	    margin-left: 20px;
	    margin-top: 30px;
	}

	.slipmore-option-title2
	{
	    font-size: 30px;
	    color: #333333;
	    text-align: left;
	    margin-left: 20px;
	    margin-top: 50px;
	}

	.slipmore-option-btn1
	{
	    width: 21.5%;
	    height: 70px;
	    line-height: 70px;
	    margin-top: 20px;
	    margin-left: 20px;
	    background-color: #009688;
	    border: 1px solid #009688;
	    font-size: 26px;
	    color: white;
	    text-align: center;
	    display: inline-block;
	}

	.slipmore-option-btn2
	{
	    width: 21.5%;
	    height: 70px;
	    line-height: 70px;
	    margin-top: 20px;
	    margin-left: 20px;
	    background-color: white;
	    border: 1px solid #c9c9c9;
	    font-size: 26px;
	    color: #333333;
	    text-align: center;
	    display: inline-block;
	}

	.slipmore-option-btn3
	{
	    width: 21.5%;
	    height: 70px;
	    line-height: 70px;
	    margin-top: 20px;
	    margin-left: 20px;
	    background-color: #ff5722;
	    border: 1px solid #ff5722;
	    font-size: 26px;
	    color: white;
	    text-align: center;
	    display: inline-block;
	}

	.slipmore-option-btn4
	{
	    width: 21.5%;
	    height: 70px;
	    line-height: 70px;
	    margin-top: 20px;
	    margin-left: 20px;
	    background-color: #1e9fff;
	    border: 1px solid #1e9fff;
	    font-size: 26px;
	    color: white;
	    text-align: center;
	    display: inline-block;
	}
</style>